<template>
	<view>
		<div class="message">
			<div class="item" v-for="(item,i) in list.items" :key="i">
				<div class="top top2">
					<div class="tit">
						<div class="span">我的留言:</div>
						<div class="em">{{common.DateToString(item.created_at)}}</div>

					</div>
					<div class="con">{{item.message}}</div>
				</div>
				<div class="top" v-if="item.reply">
					<div class="tit">
						<div class="span">管家回复:</div>
						<div class="em">{{common.DateToString(item.updated_at)}}</div>
					</div>
					<div class="con" v-if="item.reply">{{item.reply}}</div>
				</div>
			</div>
			<div class="web_404" v-if="list.items&&list.items.length==0">
				<image src="../../static/images/none404.png" mode="widthFix"></image>
			</div>
		</div>
		<view class="food_btn">
			<navigator url="/pages/center/messagefill" hover-class="none">
				<view class="food_btn_con">
					<text class="btn btn_two">我要留言</text>
				</view>
			</navigator>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list:[],
			}
		},
		onShow() {
			let that = this;
			that.GetList();
		},
		methods: {
			GetList() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'user/message', '', function(res) {
					uni.hideLoading();
					console.log(res.data);
					that.list = res.data;
				});
			},
		}
	}
</script>

<style scoped>
	.message {
		padding-top: 20rpx;
	}

	.item {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.item .top {
		padding: 24rpx;
	}

	.item .top .tit {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top2 {
		border-bottom: 1px solid #f7f7f7;
	}

	.item .top .tit .span {
		width: 144rpx;
		border-radius: 50px;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: #f68a17;
		background-color: #fff5ea;
	}

	.item .top.top2 .tit .span {
		color: #1772f6;
		background-color: #eaf3ff;
	}

	.item .top .tit .em {
		font-size: 24rpx;
		color: #999;
	}

	.item .top .con {
		margin-top: 26rpx;
		font-size: 28rpx;
		color: #333;
	}
</style>